<template>
    <div class="page page-progress-dialog">
        <h2>环形进度条</h2>
        <div class="attributes">
            <h2>API</h2>
            <table>
                <tr><th>参数</th><th>说明</th><th>类型</th><th>可选</th><th>默认</th></tr>
                <tr><td>percentage</td><td>进度条百分比<br>例如:20</td><td>Number</td><td>-</td><td>必选</td></tr>
                <tr><td>strokeWidth</td><td>进度条线条宽度<br>1倍UI图px值</td><td>Number</td><td>-</td><td>6</td></tr>
                <tr><td>width</td><td>进度条大小<br>1倍UI图px值</td><td>Number</td><td>-</td><td>6</td></tr>
                <tr><td>outerBackColor</td><td>进度条底部颜色</td><td>String</td><td>-</td><td>#f2f2f4</td></tr>
                <tr><td>innerBackColor</td><td>进度条颜色</td><td>String</td><td>-</td><td>#13ce66</td></tr>
                <tr><td>status</td><td>进度条状态</td><td>String</td><td>exception<br>success<br>text</td><td>text</td></tr>
            </table>
        </div>
        <v-progress-dialog
            :percentage = percentage
        ></v-progress-dialog>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
            &gt;&lt;v-progress&gt;
        </code></pre>
        <v-progress-dialog
            :percentage = percentage
            :strokeWidth = strokeWidth
            :width = width
            :status = status
        ></v-progress-dialog>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
                :strokeWidth = strokeWidth
                :width = width
                :status = status
            &gt;&lt;v-progress&gt;
        </code></pre>
        <v-progress-dialog
            :percentage = percentage
            :outerBackColor = outerBackColor
            :innerBackColor = innerBackColor
        ></v-progress-dialog>
        <pre v-highlightjs @touchend.stop><code class="html">
            &lt;v-progress
                :percentage = percentage
                :outerBackColor = outerBackColor
                :innerBackColor = innerBackColor
            &gt;&lt;v-progress&gt;
        </code></pre>
    </div>
</template>

<script>
    import vProgressDialog from '../vendor/v-progress-dialog';

    export default {
        components: { vProgressDialog },

        name: 'page-progress-dialog',

        data () {
            return {
                percentage: 10,
                strokeWidth: 12,
                width: 200,
                outerBackColor: '#94d6da',
                innerBackColor: '#f58f98',
                status: 'exception'
            };
        },

        mounted () {
            this.$logger.log('progress-dialog.mounted... ');
        },

        activated () {
            this.$logger.log('progress-dialog.activated... ');
        },

        deactivated () {
            this.$logger.log('progress-dialog.deactivated... ');
        }
    };
</script>
<style lang="scss" rel="stylesheet/scss">
    @import "../scss/variables";
    @import "../scss/mixins";

    .page-progress-dialog {
        background-color: #fff !important;
        padding-left: pxTorem(15px);
        padding-right: pxTorem(15px);
        .attributes {
            margin-bottom: pxTorem(20px);
        }
    }
</style>
